<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ivew构建</title>
    <link rel="stylesheet" href="../../css/ivew.css">
    <script src="../../js/vue2.6.js"></script>
    <script src="../../js/ivew.js"></script>
</head>
<body>
<div id="app">
    <i-button @click="show">Click me!</i-button>
    <Modal v-model="visible" title="Welcome">Welcome to ViewUI</Modal>

    <div style="padding: 20px">
        <div>
            <strong>Default Size:</strong>
            <br><br>
            <List header="Header" footer="Footer" border>
                <ListItem>This is a piece of text.</ListItem>
                <ListItem>This is a piece of text.</ListItem>
                <ListItem>This is a piece of text.</ListItem>
            </List>
            <br>
            <strong>Small Size:</strong>
            <br><br>
            <List header="Header" footer="Footer" border size="small">
                <ListItem>This is a piece of text.</ListItem>
                <ListItem>This is a piece of text.</ListItem>
                <ListItem>This is a piece of text.</ListItem>
            </List>
            <br>
            <strong>Large Size:</strong>
            <br><br>
            <List header="Header" footer="Footer" border size="large">
                <ListItem>This is a piece of text.</ListItem>
                <ListItem>This is a piece of text.</ListItem>
                <ListItem>This is a piece of text.</ListItem>
            </List>
        </div>
    </div>

</div>

<script>
    new Vue({
        el: '#app',
        data: {
            visible: false
        },
        methods: {
            show: function () {
                this.visible = true;
            }
        }
    })
</script>
</body>
</html>